<template>
  <u-upload :custom-btn="true"
  class="phote"
    ref="uUpload"
    :max-count="maxCount"
    :action="actions"
    :file-list="fileList"
    :header="headers"
    :max-size="5 * 1024 * 1024"
    @on-remove="handleRemove"
    @on-success="handleSuccess"
    @on-progress="handleProgress"
    :sucess='sucess'
  >
  <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
    <view style="color:#BEBEBE;font-size:80rpx">+</view>
		<!-- <u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon> -->
	</view>
  </u-upload>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "upload"
  },
  components: {},
  props: {
    //上传最大个数
    maxCount: {
      type: String,
      default: "1"
    },
    // 值
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      sucess: false,
      actions: this.fileUrl + "/api/common/upload",
      headers: {
        Authorization: "Bearer " + uni.getStorageSync("token")
      },
      fileList: []
    };
  },
  watch: {
    value: {
    
      handler(val, old) {
        if (old === null || old === undefined) {
          if (val) {
            this.$nextTick(() => {
              if (this.$refs.uUpload.lists.length === 0) {
                this.fileList = [
                  {
                    url: this.fileUrl + val
                  }
                ];
              }
            });
          }
        }else if(old){
          if (!val) {
           this.$nextTick(() => { 
             this.$refs.uUpload.clear()
           });
          }
        }
      },
      deep: false,
      immediate: true
    }
  },
  mounted() {
    this.fileList = [];
  },
  methods: {
    //上传过程
    handleProgress(e) {
      uni.showLoading({
        title: "上传中",
        mask:true
      });

      //   uni.showToast({
      //   icon: "none",
      //   title: "清除成功"
      // });
    },
    //上传成功
    handleSuccess(e) {
      this.$emit("upload", e.fileName);
      this.sucess = true;
      setTimeout(() => {
   wx.hideLoading();
}, 100);

      // uni.hideLoading();
      // uni.showToast({
      //   icon: "none",
      //   title: "清除成功"
      // });
    },
    toJSON() {},
    //移除图片
    handleRemove(e) {
      this.$refs.uUpload.remove(e);
      this.fileList = [];
      this.$emit("upload", "");
    }
  }
};
</script>
<style lang="scss" scoped>
.slot-btn {
	width:150rpx;
	height:150rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(255, 255, 255);
	// border-radius: 10rpx;
  border:4rpx solid #E3E3E3
}
</style>